BasicError

A common component to show an error

Properties

Name	Type	Default Value	Required	Description
onTryAgain	() => void		Yes	function called when the Try again button is pressed
messageText	string		Yes	message to display
headerText	string		No	text to appear in bold
headerA11yLabel	string		No	accessibility hint for the header
buttonA11yHint	string		No	hint for the try again button
label	string		No	label for button and accessibility title

Example

How to use the BasicError component

if (letterDownloadError) {
return <BasicError 
        onTryAgain={onViewLetter} 
        messageText={'letters.download.error'} 
        buttonA11yHint={'Try again to download your letter'} />
}

Source Code

Full code for the BasicError component

import React, { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { ViewStyle } from 'react-native'

import { Button } from '@department-of-veterans-affairs/mobile-component-library'

import { Box, TextView, VAScrollView } from 'components'
import { NAMESPACE } from 'constants/namespaces'
import { useTheme } from 'utils/hooks'

export type BasicErrorProps = {
  /** function called when the Try again button is pressed */
  onTryAgain: () => void
  /** message to display */
  messageText: string
  /** text to appear in bold  */
  headerText?: string
  /** accessibility hint for the header */
  headerA11yLabel?: string
  /** hint for the try again button */
  buttonA11yHint?: string
  /** label for button and accessibility title */
  label?: string
}

/**A common component to show an error*/
const BasicError: FC<BasicErrorProps> = ({
  onTryAgain,
  messageText,
  buttonA11yHint,
  headerText,
  headerA11yLabel,
  label,
}) => {
  const { t } = useTranslation(NAMESPACE.COMMON)
  const theme = useTheme()
  const buttonText: string = label || t('tryAgain')

  const scrollStyles: ViewStyle = {
    flexGrow: 1,
    justifyContent: 'center',
  }

  const containerStyles = {
    flex: 1,
    mx: theme.dimensions.gutter,
    mt: theme.dimensions.contentMarginTop,
    mb: theme.dimensions.contentMarginBottom,
  }

  return (
    <VAScrollView contentContainerStyle={scrollStyles}>
      <Box justifyContent="center" {...containerStyles}>
        {headerText && (
          <TextView
            accessibilityLabel={headerA11yLabel}
            variant="MobileBodyBold"
            accessibilityRole="header"
            textAlign="center">
            {headerText}
          </TextView>
        )}
        <TextView paragraphSpacing={true} textAlign="center">
          {messageText}
        </TextView>
        <Box accessibilityRole="button">
          <Button onPress={onTryAgain} label={buttonText} a11yHint={buttonA11yHint} testID={buttonText} />
        </Box>
      </Box>
    </VAScrollView>
  )
}

export default BasicError

Accessibility